<template>
  <div class="dashboard-container">
    <div class="dashboard-container">
      <div class="app-container">
        <!-- 靠右的按钮 -->
        <page-tools>
          <template v-slot:after>
            <el-button type="primary" size="small" @click="editPermission">添加权限</el-button>
          </template>
        </page-tools>
        <!-- 表格 -->
        <el-table border :data="tableData" row-key="id">
          <el-table-column label="名称" prop="name"/>
          <el-table-column align="center" label="标识" prop="code"/>
          <el-table-column align="center" label="描述" prop="description"/>
          <el-table-column align="center" label="操作">
            <template slot-scope="{row}">
              <el-button type="text" v-if="row.type===1" @click="editPermission(row.id,0)">添加</el-button>
              <el-button type="text" @click="editPermission(row.id,1)">编辑</el-button>
              <el-button type="text" @click="deletePermission(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 新增权限弹出层 -->
        <el-dialog
          :title="!formData.id?'新增权限':'编辑权限'"
          :visible.sync="dialogVisible"
          width="50%"
          :rules="rules"
          @close="closeDialog"
        >
          <el-form ref="form" :model="formData" label-width="80px" :rules="rules">
            <el-form-item label="权限名称" prop="name">
              <el-input v-model="formData.name" style="width:90%"/>
            </el-form-item>
            <el-form-item label="权限标识" prop="code">
              <el-input v-model="formData.code" style="width:90%"/>
            </el-form-item>
            <el-form-item label="权限描述">
              <el-input v-model="formData.description" style="width:90%"/>
            </el-form-item>
            <el-form-item label="开启">
              <el-switch v-model="formData.enVisible" :active-value="1" :inactive-value="0"/>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="postForm">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getPermissionList,
  getPermissionDetail,
  delPermission,
  addPermission,
  updatePermission
} from "@/api/permisson.js";
import { tranListToTreeData } from "@/utils/index";
import { awaitExpression } from "@babel/types";
export default {
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      formData: {
        enVisible: 0,
        description: "",
        name: "",
        code: ""
      },
      rules: {
        name: [{ required: true, message: "请输入权限名称", trigger: "blur" }],
        code: [{ required: true, message: "请输入权限标识", trigger: "blur" }]
      }
    };
  },
  created() {
    this.getPermissionList();
    console.log(21);
  },
  methods: {
    async getPermissionList() {
      this.tableData = tranListToTreeData(await getPermissionList(), "0");
    },
    async editPermission(id, flag) {
      this.dialogVisible = true;
      if (flag === 1) {
        this.formData.id = id;
        this.formData = await getPermissionDetail(id);
      } else if (flag === 0) {
        this.formData.pid = id;
        this.formData.type = 2;
      } else {
        this.formData.pid = "0";
        this.formData.type = 1;
      }
    },
    async postForm() {
      if (this.formData.id) {
        await updatePermission(this.formData);
      } else {
        await addPermission(this.formData);
      }
      this.dialogVisible = false;
      this.$message.success("操作成功");
      this.getPermissionList();
    },
    closeDialog() {
      this.formData = {};
      this.$refs.form.resetFields();
    },
    deletePermission(id) {
      this.$confirm("此操作将永久删除该权限, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          await delPermission(id);
          this.getPermissionList();
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style>
</style>
